<template>
  <div id="looOnOff" class="wrapper p-4">
    <div class="mb-3">
      <el-radio v-model="type" label="1" @change="typeChange">全开</el-radio>
      <el-radio v-model="type" label="0" @change="typeChange">全关</el-radio>
    </div>
    <ul class="loop-group">
        <li v-for="(item,index) in loops" :key="index" :class="{'disabled':switchState(index+1)}" >
           <label class="pl-4" style="width: 45%"><el-checkbox v-model="item.isCheck" :disabled="switchState(index+1)" @change="watchLoops">第{{item.name}}路</el-checkbox></label>
           <label style="width: 30%"><el-radio v-model="item.onOff" :label="100" :disabled="switchState(index+1)" @change="watchLoops">开灯</el-radio></label>
           <label><el-radio v-model="item.onOff" :label="0" :disabled="switchState(index+1)" @change="watchLoops">关灯</el-radio></label>
        </li>
    </ul>
    <div class="d-flex">
      <div class=" ">
        <label >操作密码：</label>
        <el-tooltip class="item" :content="errors.first('pwd')" :value="errors.has('pwd')" :manual="true">
          <el-input type="password" size="small" class="w120" :class="{'is-error':errors.has('pwd')}"  v-model="operatePwd" v-validate="'required'" name="pwd"></el-input>
        </el-tooltip>
      </div>
      <!--:class="{'ur-btn-primary':!btnState}" -->
      <el-button class="ur-btn w75 ml-2"  type="info ur-btn-primary" @click="callFun" :disabled="btnState"><i class="iconfont icon-queding"></i>下发</el-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from 'api/api'
  import fetch from 'api/fetch'
  import {mapState} from 'vuex'

  export default {
    components: {},
    props: {
      boxs:null,
      page:''
    },
    data() {
      return {
        //'一','二','三','四','五','六','七','八'
        loops:[
          {name:'一',isCheck:false,onOff:0},
          {name:'二',isCheck:false,onOff:0},
          {name:'三',isCheck:false,onOff:0},
          {name:'四',isCheck:false,onOff:0},
          // {name:'五',isCheck:false,onOff:0},
          // {name:'六',isCheck:false,onOff:0},
          // {name:'七',isCheck:false,onOff:0},
          // {name:'八',isCheck:false,onOff:0},
        ],
        switchNos:[],
        operatePwd:'',
        callNum:{total:0,success:0,error:0},
        outlineNum:0,
        type:-1
      }
    },
    watch: {

    },
    computed: {
      ...mapState({
        btnState: state => state.user.btnState,
      })
    },
    methods: {
      typeChange(){
        this.loops.map((loop,index,loops)=>{
          if(this.outlineNum>index){
            loop.isCheck=true
            if(this.type==1){
              loop.onOff=100
            }else if(this.type==0){
              loop.onOff=0
            }
          }
        })
      },
      watchLoops(){
        let str=''
        this.loops.map(loop=>{
          if(!loop.isCheck){
            this.type=-1
          }
          if(str===''){
            str=loop.onOff
          }else{
            if (str != loop.onOff) this.type = -1
          }
        })
      },
      callFun(){
        this.$validator.validateAll().then((res) => {
          let pIndex = 1
          let boxIds=[]
          if (res) {
            let switchs=[]
            if(this.type==0){//全关
              switchs=[{SwitchNo:0,LightLevel:0}]
            }else if(this.type==1){//全开
              switchs=[{SwitchNo:0,LightLevel:100}]
            }else {
              this.loops.map((v,index,arr)=>{
                if (v.isCheck) switchs.push({SwitchNo: index + 1, LightLevel: v.onOff})
              })
            }
            if (switchs.length == 0) return this.$message.warning({showClose:true,message:'请选择线路'})
            this.$store.commit('user/SET_USER_PWD', this.operatePwd)
            this.$store.commit('user/SET_BTN_STATE',true)
            this.boxs.map(box => {
              boxIds.push(box.BoxId)
              box.result = '下发控制中...'
              this.$emit('updateResult',{callNum:this.callNum,boxIds:boxIds})
              api.fetch('/Communication/Rtu/RtuSwitchController?devAddr=' + box.DevAddr, switchs)
                .then(r => {
                  box.opereaTime=api.formatDate(new Date(),'yyyy-MM-dd HH:mm:ss')
                  if (r.err) {
                    this.callNum.error = this.callNum.error + switchs.length
                    box.result = 0
                    box.resultInfo = r.err
                  } else {
                    if(this.page=='gis'){
                      let str=''
                      switchs.map(r=>{
                        str+='线路'+(r.SwitchNo)+(r.CtlType==0?'关灯':'开灯')+'成功'
                      })
                      this.$message.success({showClose:true,message:str})
                    }
                    this.callNum.success = this.callNum.success + switchs.length
                    box.result = 1
                    box.resultInfo = ''
                  }
                  let total = this.boxs.length
                  let pcen = Math.round(pIndex / total * 100) > 100 ? 100 : Math.round(pIndex / total * 100)
                  this.$emit('updateBar',pcen)
                  pIndex++
                  //pIndex>this.boxs.length
                  if (pcen==100) {
                    this.callNum.total = this.callNum.error + this.callNum.success
                    this.$emit('updateResult',{callNum:this.callNum,boxIds:boxIds})
                    this.$store.commit('user/SET_BTN_STATE',false)
                  }
                })
            })
          }
        })
      },
      switchState(index){
        // return this.switchNos.indexOf(index)==-1
        if(this.outlineNum<index){
          return true
        }
      },
      getOutlineNum(){
        this.boxs.map(box => {
          let num=box.OutlineNum?box.OutlineNum:0
          if (num > this.outlineNum) {
            this.outlineNum = num
          }
        })
      },
      querySwitch(){
        this.boxs.map(box=>{
          fetch.querySwitch({BoxId:box.BoxId})
            .then(r=>{
              let data=r.data
              data.map(r=>{
                if (this.switchNos.indexOf(r.SwitchNo) == -1) {
                  this.switchNos.push(r.SwitchNo)
                }
              })
            })
        })
      }
    },
    created() {
      // this.querySwitch()
      this.getOutlineNum()
    },
    mounted() {
    },
    activated(){

    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  .loop-group{
    li{border: 1px solid #ddd;border-radius: 4px;height: 44px;line-height: 44px;margin-bottom: 10px;
      &.disabled{cursor: not-allowed;}
    }
  }
</style>
